<template>
  <!-- 财务核销 -->
  <hose>
    <Search :iptObj="iptObj" :optionArr="optionArr"></Search>
    <Table
      :tableArr="tabArr"
      :operationObj="operationObj"
      :tableData="tableData"
      @deleteRow1="deleteRow"
      @deleteRow2="Zzh"
    ></Table>
    <PaginationVue @cChange="fun" :total="total"></PaginationVue>
    <MaskVue ref="mask" title="订单确认" type="column" :headright="false">
      <template #main>
        <div v-show="num == '待支付'">
          <p class="p1">支付方式:</p>
          <div class="imgs">
            <img src="../../img/logo/logo2.png" alt />
            <img src="../../img/logo/logo3.png" alt />
            <img src="../../img/logo/logo1.png" alt />
          </div>
          <div>
            <input type="radio" name="age" value="18" />支付宝
            <input type="radio" name="age" value="18-40" checked="checked" />微信
            <input type="radio" name="age" value="40" />银联
          </div>
        </div>
      </template>
    </MaskVue>

    <MaskVue ref="mask1" title="发票申请" :headright="false">
      <template #main>
        <div class="faPia">
          <p class="inp2">
            <span>抬头类型:</span>
            <input type="radio" name="age" value="18" />企业单位
            <input type="radio" name="age" value="18-40" checked="checked" />个人/非企业单位
          </p>

          <p>
            <span>发票抬头:</span>
            <el-input class="inp1" type="primary" size="large" placeholder="请输入发票抬头" />
          </p>
          <p>
            <span>税号:</span>
            <el-input class="inp1" type="primary" size="large" placeholder="请输入税号" />
          </p>
          <p>
            <span>备注说明:</span>
            <el-input class="inp1" type="primary" size="large" placeholder="请输入备注说明" />
          </p>
          <p>
            <span>地址和电话:</span>
            <el-input class="inp1" type="primary" size="large" placeholder="请输入地址和电话" />
          </p>
          <p>
            <span>开户行和账号:</span>
            <el-input class="inp1" type="primary" size="large" placeholder="请输入开户行和账号" />
          </p>
          <p>
            <span>收件邮箱:</span>
            <el-input class="inp1" type="primary" size="large" placeholder="请输入收件邮箱" />
          </p>
          <p class="span1">金额: ￥2000.00</p>
        </div>
      </template>
    </MaskVue>
  </hose>
</template>

<script setup>
import hose from "../../components/hose.vue";
import Search from "../../components/Search.vue";
import Table from "../../components/Table.vue";
import { ref, reactive } from "vue";
import MaskVue from "../../components/Mask.vue";
import { financial } from "../../api/index";
import PaginationVue from "../../components/Pagination.vue";

const total = ref();
const num1 = ref(1);
const arr = ref([]);
const fun = index => {
  num1.value = index;
  financial(num1.value, 10).then(res => {
    arr.value = res.data.data.data;
    total.value = res.data.data.totalPages * 10;
    tableData.value = [];
    arr.value.forEach(item => {
      tableData.value.push({
        订单编号: item.id,
        订单类型: item.ordertype,
        订单时间: item.ordertime,
        订单金额: item.orderamount,
        支付状态: item.status
      });
    });
  });
};

financial(num1.value, 10).then(res => {
  total.value = res.data.data.totalPages * 10;
  arr.value = res.data.data.data;
  console.log(res);
  arr.value.forEach(item => {
    tableData.value.push({
      订单编号: item.id,
      订单类型: item.ordertype,
      订单时间: item.ordertime,
      订单金额: item.orderamount,
      支付状态: item.status
    });
  });
});

const tableArr = ref([
  "订单编号",
  "订单类型",
  "订单时间",
  "订单金额",
  "支付状态"
]);

const tabArr = reactive({
  订单编号: "订单编号",
  订单类型: "订单类型",
  订单时间: "订单时间",
  订单金额: "订单金额",
  支付状态: "支付状态"
});
const tableData = ref([]);
const operationObj = ref({
  operation1: "查看详情",
  operation2: "发票申请",
  title1: " 操作 ", //操作标题
  title2: "发票申请",
  type1: "primary", //button 类型
  type2: "primary",
  text1: true, // true 为文字类型
  text2: true,
  bool1: true, //操作是否显示
  bool2: true
});
const iptObj = ref({
  title: "财务核销",
  userBool: true,
  userTitle: "订单编号",
  userTel: "联系电话",
  userRegion: "当前状态",
  telrBool: false,
  regionBool: true,
  userText: "请输入订单编号",
  telText: "请输入联系电话",
  regionText: "请选择内容",
  BtnBool: true
});
const optionArr = ref(["所有", "服务费", "租用费", "充值", "奖励"]);

const flag = ref(true);
const num = ref("待支付");

const deleteRow = name => {
  flag.value = !flag.value;
  const index1 = {
    订单编号: tableData.value[name].订单编号,
    订单类型: tableData.value[name].订单类型,
    订单时间: tableData.value[name].订单时间,
    订单金额: tableData.value[name].订单金额,
    支付状态: tableData.value[name].支付状态
  };

  num.value = tableData.value[name].支付状态;

  const index2 = {
    订单编号: tableData.value[name].订单编号,
    订单类型: tableData.value[name].订单类型,
    订单时间: tableData.value[name].订单时间,
    订单金额: tableData.value[name].订单金额,
    支付方式: "支付宝",
    支付流水号: "194654312654984311",
    支付时间: "2019-9-12 11:56:18"
  };

  if (index1.支付状态 == "待支付") {
    mask.value.open(index1);
  } else {
    mask.value.open(index2);
  }
};
console.log(num.value);

const Zzh = index => {
  mask1.value.open(index);
};
const mask = ref(null);
const mask1 = ref(null);
</script>

<style lang="less" scoped>
.p1 {
  font-size: 18px;
  color: #32325d;
  font-weight: 700;
}

.imgs {
  display: flex;
  margin: 10px 0px;
}

.faPia {
  p {
    font-size: 15px;
    font-weight: 700;
    color: #32325d;
    height: 60px;

    span {
      width: 100px;
      display: inline-block;
      text-align: right;
    }

    input {
      font-size: 12px;
      color: #ccc;
      // width: 360px;
      margin-left: 10px;
    }
  }
}

.inp1 {
  width: 360px;
}

.span1 {
  display: inline-block;
  position: relative;
  width: 240px;
  left: 66px;
}

.inp2 {
  p {
    span {
      width: 0px;
    }
  }
}
</style>
